<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="libs/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="pub/JSCommonUtil.js"></script>
		<title>th.pb 测试</title>
	</head>


	<body>
		<div style="color:green">请打开console......</div>
		<div>
			不管是listen,bind还是unbind ,传进去的数据data会当做路径索引来处理
		</div>
		<h2>简单应用</h2>
		<ul>
			<li>father1的模板实例将变化传递给其模板数据</li>
			<li>father2的模板数据监听father1的模板数据</li>
			<li>father2的模板实例将变化传递给其模板数据</li>
			<li>将一个fn绑定到father2模板数据a上</li>
		</ul>

		father 1
		<div id="father1">
			
		</div>
		father 2
		<div id="father2">
			
		</div>

		<h2>两个模板之间同数据模型绑定</h2>
		<p>效果和简单应用一样，不过是改了监听路径类型</p>
		father3
		<div id='father3'></div>
		father4
		<div id='father4'></div>

		
		<h2>两个模板之间不同数据模型绑定</h2>

		<div id='father7'></div>
		<div id='father8'></div>
		<script type="text/javascript">
		var session={};
		$(function(){
			jc.render({a:1,b:2},"test_th_pb_1",$('#father1'),function(){
				console.log("father1 OK");
			})
			jc.render({a:2},"test_th_pb_1",$('#father2'),function(){
				console.log("father 2OK");
				console.log("father2 绑定了father1的数据\n可通过改变father1的数据来改变father2的")

				jc.th($('#father2')).listen("a",$('#father1'))
				jc.th($('#father2')).bind("a",function(val){
					console.log(" #father2 的模板数据 a 改变了值，为:" +val)
				})
				
			})
			var data2={
				elem:[
					"value1","value2"
				]
			}
			var data3={
				elem:[
					"value1","value2"
				]
			}
			jc.render(data2,"test_th_pb_2",$('#father3'),function(){
				console.log("father3 ok")
			})
			jc.render(data3,"test_th_pb_2",$('#father4'),function(){
				console.log("father4 ok")
				console.log("father4 会监听father3 的所有数据变化")
				jc.th($('#father4')).listen(data2,$('#father3'))	
				jc.th($('#father4')).bind(data2,function(value,path){
					console.log("father 4 "+path+" change to"+value)
				})
			})
			
			var data4 ={
				elem:[
					"value1","value2"
				]
			}



			var data5={
				data:{
					e:['val1','val2']
				}
			}

			jc.render(data4,"test_th_pb_2",$("#father7"),function(){
				console.log("father7 ok")
				jc.render(data5,"test_th_pb_3",$("#father8"),function(th){
					console.log("father 8 ok")
					th.listen(["data.e.0","data.e.1"],$("#father7"),["elem.0","elem.1"])
					th.bind("data.e.0",function(value,path){
						console.log(path+" change to:"+ value)
					})
					th.bind("data.e.1",function(value,path){
						console.log(path+" change to:"+ value)
					})
				//console.log("#father8 data:"+JSON.stringify(jc.th($("#father8")).data()))
			})
			})
			
			


			// var a ={a:123}
			// var b = a.a
			// Object.defineProperty(a,"a",{
			// 	set:function(v){
			// 		b=v
			// 	},
			// 	get:function(){
			// 		return b
			// 	}
			// })
			// if("value" in Object.getOwnPropertyDescriptor(a,"a")){
			// 	console.log("wrong")
			// }else{
			// 	console.log("right")
			// }
		})
		
		</script>
	</body>
</html>